<template>
	<view>
		<！--顶部区域-->
			<view class="smart-page-head">
				<view class="smart-page-head-title">text 文本组件</view>
			</view>
			<view class="smart-padding-wrap">
				<view class="text-box scroll-y">
					<text>{{Text}}</text>
				</view>
				<button type="primary" :disabled="!canAdd" @click="add">add line</button>
				<button type="warn" :disabled="!canRemove" @click="remove">remove line</button>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Text: 
				['HBuilder，400万开发者选择的IDE',
					'HBuilderX，轻巧、极速、极客编辑器',
					'uni-app，终极跨平台方案',
					'HBuilder，400万开发者选择的IDE',
					'HBuilderX，轻巧、极速、极客编辑器',
					'uni-app，终极跨平台方案',
					'HBuilder，400万开发者选择的IDE',
					'HBuilderX，轻巧、极速、极客编辑器',
					'uni-app，终极跨平台方案',
				],
				text:'',
				canAdd: true,
				canRemove: true,
				extraLine: []
			};
		},
		methods: {
			add: function(e) {
				this.extraLine.push(this.texts[this.extraLine.length % 12]);
				this.text = this.extraLine.join('\n');
				this.canAdd = this.extraLine.length < 12;
				this.canRemove = this.extraLine.length > 0;
			},
			 remove: function(e) {
			      if (this.extraLine.length > 0) {
			        this.extraLine.pop();
			        this.text = this.extraLine.join('\n');
			        this.canAdd = this.extraLine.length < 12;
			        this.canRemove = this.extraLine.length > 0;
					}
			}
		}
	};
</script>

<style>

</style>